<template>
  <el-table
      :data="tableData"
      ref="tableData"
      @expand-change="expandChange"
      row-key="id"
      :expand-row-keys="tokenId"
      style="width: 100%">
    <el-table-column type="expand">
      <template slot-scope="props">
        <el-form label-position="left" inline class="demo-table-expand" >
          <token-echarts  v-bind:token-data="data" v-loading="TokenLoading"/>
        </el-form>
      </template>
    </el-table-column>
    <el-table-column
        type="index"
        width="50">
    </el-table-column>
    <el-table-column
        label="碳通证"
        prop="symbol">
    </el-table-column>
    <el-table-column
        label="价格"
        prop="price">
    </el-table-column>
    <el-table-column
        label="描述"
        prop="name">
    </el-table-column>
    <el-table-column
        label="总量"
        prop="pool">
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <router-link :to="'/tokenInfo/'+scope.row.id">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">详情</el-button>
        </router-link>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import TokenEcharts from "@/views/Wallet/components/TokenEcharts";
export default {
  name: "tokenList.vue",
  components:{
    TokenEcharts
  },
  data() {
    return {
      tokenId:[],
        data : [
          ["2000-07-16", 64],
          ["2000-07-17", 69],
          ["2000-07-18", 88],
          ["2000-07-19", 77],
          ["2000-07-20", 83],
          ["2000-07-22", 57],
        ],
      tableData: [{
        id: '12987122',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987123',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987125',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }, {
        id: '12987126',
        name: '好滋好味鸡蛋仔',
        category: '江浙小吃、小吃零食',
        desc: '荷兰优质淡奶，奶香浓而不腻',
        address: '上海市普陀区真北路',
        shop: '王小虎夫妻店',
        shopId: '10333'
      }],
      TokenLoading:false,
      childLoading:false
    }
  },
  mounted() {
    let tokenItemInfo=[]
    this.TokenCenterJS.getTokenInfoList(list=>{
      list[0].map((c,i)=>{
        this.TokenCenterJS.getExchangeAddressByTokenAddress(c,exchangeAddress=>{
          this.ExchangeJS.getTokenPriceByExchangeAddress(exchangeAddress,tokenInfoPrice=>{
            let str={
              id:c,
              name:list[1][i],
              symbol:list[2][i],
              price:tokenInfoPrice,
              pool:list[3][i]
            }
            tokenItemInfo.push(str)
          })
        })

      })
      this.tableData = tokenItemInfo
      this.childLoading = true
      setTimeout(()=>{
        this.$emit('childLoadStatus',this.childLoading)
      },500)

    })
  },
  watch:{

  },
  methods:{
    handleEdit(index, row) {
      // console.log(index, row);
    },
    expandChange(row) {
      if(row.id===this.tokenId[0]){

        this.$refs.tableData.toggleRowExpansion(row,false)
      }else {
        this.data = [["10:15", 64],
          ["10:16", 69],]
        this.tokenId=[row.id]
      }

    }
  }
}
</script>

<style scoped lang="less">
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 40%;
}
</style>
